<template>
  <k-view class="content-view">
    <k-view class="content-block rank-chart-card">
      <rank-chart
        :chartData="rankChartData"
        type="region"
        @changeCode="changeCode"
        :theme="theme"
        :isEmpty="rankChartData.length === 0"
        :isLoading="chartLoading"
        @reload="getIndustryOrRegionScoreInfo"
      ></rank-chart>
    </k-view>
    <k-view class="content-block score-statistics-card" v-if="currentItem.code">
      <statistics
        :chartData="distributionData"
        :statisticsData="statisticsData"
        :isEmpty="statisticsDataEmpty"
        :isLoading="statisticsDataLoading"
        :statistcsType="4"
        :currentIndustry="currentItem"
        @reload="getMarketStatisticsInfo"
      ></statistics>
    </k-view>
    <k-view class="content-block" v-if="currentItem.code">
      <distribution
        :chartData="distributionData"
        :statistcsType="4"
        :currentItem="currentItem"
        :detailData="distributionDetailData"
        :isEmpty="distributionDataEmpty"
        :isLoading="distributionDataLoading"
        @reload="getMarketDistributionInfo"
      ></distribution>
    </k-view>
    <k-view class="content-block" v-if="currentItem.code">
      <rank-list :activeTab="4" :currentItem="currentItem" :themeType="theme"></rank-list>
    </k-view>
  </k-view>
</template>

<script>
import Distribution from '@/components/Home/distribution.vue';
import Statistics from '@/components/Home/statistics.vue';
import RankChart from '@/components/Home/rankChart.vue';
import {
  getIndustryOrRegionScore,
  getMarketDistribution,
  getMarketDistributionDetail,
  getMarketStatistics,
} from '@/apis';
import RankList from '@/components/Home/rankList.vue';
import { sendClickStat } from '@/utils/stat';
import { INDEX_TAB_ID, PAGEID } from '@/config/stat';

export default {
  props: {
    theme: {
      type: String,
      default: '',
    },
  },
  components: {
    Distribution,
    Statistics,
    RankChart,
    RankList,
  },
  data() {
    return {
      chartLoading: false,
      statisticsDataEmpty: false,
      statisticsDataLoading: false,
      distributionDataEmpty: false,
      distributionDataLoading: false,
      distributionData: [],
      rankChartData: [],
      statisticsData: {},
      currentItem: {
        code: '',
        label: '',
        value: '',
      },
      distributionDetailData: {
        score_top_three: [],
        score_inc_highest: {},
        rank_inc_highest: {},
      },
    };
  },
  methods: {
    async getMarketDistributionDetailInfo() {
      const res = await getMarketDistributionDetail({
        block_type: 'region',
        block_code: this.currentItem.code,
      });
      if (res.status_code !== 0 && !res.data) {
        return;
      }
      this.distributionDetailData = res.data;
    },
    async getMarketDistributionInfo() {
      this.distributionDataLoading = true;
      const res = await getMarketDistribution({
        block_type: 'region',
        block_code: this.currentItem.code,
      });
      this.distributionDataLoading = false;
      if (res.status_code !== 0 || !res.data) {
        this.distributionDataEmpty = true;
        return;
      }
      this.distributionData = this.createDistributionChartData(res.data.list);
    },
    createDistributionChartData(info) {
      const chartData = [];
      if (info && info.length > 0) {
        info.forEach(item => {
          chartData.push({
            value: Number(item.num) ? item.num : 0,
            label: `${item.lower}-${item.upper}`,
          });
        });
      }
      return chartData;
    },
    async getIndustryOrRegionScoreInfo() {
      this.chartLoading = true;
      const res = await getIndustryOrRegionScore('region');
      if (res.status_code !== 0 && !res.data) {
        return;
      }
      this.rankChartData = this.createRankChartData(res.data.block_list);
      if (this.rankChartData.length > 0) {
        this.currentItem = this.rankChartData[0];
      }
      this.chartLoading = false;
      this.getMarketStatisticsInfo();
      this.getMarketDistributionDetailInfo();
      this.getMarketDistributionInfo();
    },
    createRankChartData(info) {
      const chartData = [];
      if (info && info.length > 0) {
        info.forEach(item => {
          chartData.push({
            value: item.score,
            label: item.name,
            code: item.code,
          });
        });
      }
      return chartData;
    },
    async getMarketStatisticsInfo() {
      this.statisticsDataLoading = true;
      const res = await getMarketStatistics({
        block_type: 'region',
        block_code: this.currentItem.code,
      });
      this.statisticsDataLoading = false;
      if (res.status_code !== 0 || !res.data) {
        this.statisticsDataEmpty = true;
        return;
      }
      this.statisticsData = res.data;
    },
    changeCode(item) {
      sendClickStat(`${PAGEID.INDEX}.${INDEX_TAB_ID[4]}.${item.code}.click`);
      this.currentItem = item;
      this.getMarketStatisticsInfo();
      this.getMarketDistributionDetailInfo();
      this.getMarketDistributionInfo();
    },
  },
  mounted() {
    this.getIndustryOrRegionScoreInfo();
  },
};
</script>

<style lang="less">
.content-view {
  .content-block {
    width: calc(100vw - 24px);
    margin: 16px auto;
  }
  .rank-chart-card {
    margin: 16px auto 0 !important;
  }
  .score-statistics-card {
    margin: -16px auto 16px !important;
  }
}
</style>
